<template>
	<view class="body">
		<view class="title">
			<view>当前积分：{{soc}}</view>
			<view class="flex">
				<view @click="all()">所有商品</view>
				<view @click="oneW()">1万以内</view>
				<view @click="twoW()">1-2万</view>
				<view @click="minW()">2-5万</view>
				<view @click="fiveW()">5万以上</view>
			</view>
		</view>
		<view class="show">
			<view  class="cont" v-for="i in tablePage" :key="i.Id" @click="link(i.Id)">
				<image :src="i.good_ImgUrl" alt="无法找到该图片"></image>
				<view class="tit">{{i.good_Name}}</view>
				<view class="soc">
					<text>
						<text>{{i.good_DuiHuanJiFen}}&nbsp;</text>
						<text>&nbsp;积分</text>
					</text>
					<view class="col">{{i.good_KuChun>100?'库存充足':i.good_KuChun}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				soc:'',
				arr:[],
				show:[],
				page:1,
				name:''
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'userInfo',
				success:  (res)=>{
					this.name = res.data
				}
			})
        },
		onReady(){
			uni.request({
				url: 'http://localhost:3001/selectJf', 
				method:'post',
				data:{
					userName:this.name
				},
				success: (res) => {
					this.soc = res.data.data[0].jiFen
				}
			});
			uni.request({
				url: 'http://localhost:3001/allGoods', 
				method:'get',
				success: (res) => {
					this.arr = res.data.data;
					this.show = this.arr
					this.page = 1
				}
			});
		},
		//下拉到底页码+1
		onReachBottom() {
			if(this.page < Math.ceil(this.show.length/10)){
				uni.showLoading({title: '数据加载中',mask:true});
				this.timer = setInterval(() => {
					uni.hideLoading();
					this.page++
				}, 4000);
			}else if(this.page >= Math.ceil(this.show.length/10)){
				uni.showLoading({title: '已没有更多数据',mask:true});
				this.timer = setInterval(() => {
					this.page = Math.ceil(this.show.length/10)
					uni.hideLoading();
				}, 2000);
			}
		},
		computed:{
			tablePage(){
				let nowPage = (this.page - 1) * 10;
				return this.show.slice(0, nowPage + 10)
			}
		},
		methods:{
			//传ID给商品详情
			link(id){
				uni.navigateTo({
					url:'/pages/details/details?id=' + id
				});   
			},
			//展示所有商品数据
			all(){ 
				this.show = this.arr;
			},
			//展示积分一万以下的商品数据
			oneW(){
				this.show = this.arr
				this.show = this.show.filter(i=>i.good_DuiHuanJiFen <= 10000)
			},
			//展示积分一万到二万的商品数据
			twoW(){
				this.show = this.arr
				this.show = this.show.filter(i=>i.good_DuiHuanJiFen > 10000 && i.good_DuiHuanJiFen <= 20000)
			},
			//展示积分二万到五万的商品数据
			minW(){
				this.show = this.arr
				this.show = this.show.filter(i=>i.good_DuiHuanJiFen > 20000 && i.good_DuiHuanJiFen <= 50000)
			},
			//展示积分五万以上的商品数据
			fiveW(){
				this.show = this.arr
				this.show = this.show.filter(i=>i.good_DuiHuanJiFen > 50000)
			},
		}
	}
</script>

<style lang="less" scoped>
	body{font-size: 10px}
	.body{
		font-size: 10px;
		.title{
			font-size: 1rem;
			padding:0.5rem;
			background: linear-gradient(320deg, #F89945, #F7696E);
			line-height: 2rem;
			color: #fff;
			.flex{
				display: flex;
			    flex-direction: row;
			    justify-content: space-between;
				view{
					cursor:pointer;
				}
			}
		}
		.show{
			padding: 0.5rem;
			font-size: 1rem;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-content: space-around;
			align-items: center;
			flex-wrap: wrap;
			.cont{
				width: 10rem;
				border: 1px solid #e3e3e3;
				border-radius: 0 0 10px 10px;
				margin:0.5rem;
				cursor:pointer;
				.tit{
					padding: 0.5rem;
				}
				image{
					display: inline-block;
					width:9rem;
					height: 8rem;
					padding: 0.5rem;
					color: #fff;
				}
				.soc{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					padding: 0.5rem;
					text{
						font-size: 0.9rem;
						color:red
					}
					.col{
						font-size: 0.9rem;
						color: #a0a0a0;
					}
				}
			}
		}
	}
</style>